<template>

  <!-- <p>{{ body }}</p> -->
  <div v-loading="loading">

    <!-- 标题 -->
    <el-row >
      <el-col align="bottom" justify="center" :span="23" :offset="1">
        <h2>创建 tag</h2>
      </el-col>
    </el-row>

    <!-- 穿梭框 -->
    <el-row>
      <el-col :span="23" :offset="1">
        <el-transfer v-model="body.projectID" :data="data" :titles="['Source', 'Target']" />
      </el-col>

      <!-- 占行符 -->
      <el-col style="height: 30px;">
      </el-col>

    </el-row>

  </div>

    <!-- input 表单 -->
    <!-- justify----------space-around' | 'space-between' | 'space-evenly' -->
    <!-- align----------'top' | 'middle' | 'bottom' -->
    <el-row justify="start" align="middle" style="height: 100px;">
      <el-col :span="23" :offset="1">
        <span>分支名称：</span><el-input style="width: 180px" disabled
          placeholder="main"></el-input>
      </el-col>
      <el-col :span="5" :offset="1">
        <span>Tag 名称：</span><el-input v-model="body.tagName" style="width: 180px" placeholder="tag name"></el-input>
      </el-col>
      <el-col :span="5" :offset="1">
        <!-- <el-button :disabled="body.tagName.length === 0" @click="createTag(body)">提交</el-button> -->
        <!-- <el-button :disabled="body.tagName.length === 0" @click="createTag2(body)">提交</el-button> -->
        <el-button :disabled="body.tagName.length === 0 || body.projectID.length === 0" @click="alert">提交</el-button>
      </el-col>
    </el-row>

  
<!-- <tag-result></tag-result> -->
 <!-- <p>taskList: {{ taskList }}</p> -->
<!-- <wstest :taskList="taskList"></wstest> -->

</template>

<script setup>
import { onMounted, ref } from 'vue'
import api from "../../api"
import path from "../../api/base.js"
import { ElMessage } from 'element-plus';
import tagResult from './tagResult.vue'
import wstest from './wstest.vue';


const taskList = ref([])

// 创建一个ref来存储子组件的引用
const childRef = ref(null);
// 定义一个方法来调用子组件的方法
const callChildFunction = () => {
  // 确保在DOM更新后并且子组件已经挂载再调用
  if (childRef.value) {
    childRef.value.websocketSend(taskList); // 注意这里直接调用，因为子组件是Vue 2风格，没有`defineExpose`
  }
};

// 源数据
const data = ref([])

// 表单数据
const body = ref({
  projectID: [],
  tagName: ""
})

// loading
const loading = ref(true)

function GitlabProjects() {
  api.getProjects().then(res => {
    data.value = res.data.data
    loading.value = false
  })
}

function createTag(data){
  api.createTag(data).then(res => {
    ElMessage.success(res.data)
    body.value.projectID = []
    body.value.tagName = ""
  })
}
function createTag2(data){
  api.createTag2(data).then(res => {
    ElMessage.success(res.data)
    taskList.value = res.data.data
    body.value.projectID = []
    body.value.tagName = ""
    callChildFunction()
  })
}
function alert(){
  ElMessage.info("功能开发中")
}

onMounted(() => {
  GitlabProjects()
})

</script>

<style scoped>

.el-row {
  margin-bottom: 10px;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

</style>